<template>
  <div class="time-dimension region-panel-temp">
    <el-tabs v-model="searchTypeName" type="card" >
      <el-tab-pane label="指标查询" name="idenSearch">

      </el-tab-pane>
      <el-tab-pane label="快速查询" name="quickSearch"></el-tab-pane>
    </el-tabs>
    <div class="idenSearchContent" v-show="searchTypeName=='idenSearch'">
        <div class="condition-content">
          <div class="report-box report-select">
            <p style="color:#fff">报告期类型:</p>
            <el-select
              v-model="currDimension"
              size="mini"
              placeholder="时间维度选择"
              @change="timeTypeChange"
            >
              <el-option
                v-for="item in dimensions"
                :key="item.value"
                :label="item.report_type"
                :value="item.value"
                v-show="item.report_type != '实时'"
              ></el-option>
            </el-select>
          </div>
          <div class="time" v-if="currDimension == 1">
            <el-date-picker
              class="yeartime"
              v-model="startTime"
              size="mini"
              type="year"
              placeholder="开始年份"
              value-format="yyyy"
              @change="startTimeChange"
            ></el-date-picker>
            <span class="yeartime">&nbsp;至&nbsp;</span>
            <el-date-picker
              class="yeartime"
              v-model="endTime"
              size="mini"
              type="year"
              value-format="yyyy"
              placeholder="结束年份"
              @change="endTimeChange"
            ></el-date-picker>
          </div>
          <div class="time" v-if="currDimension == 32 || currDimension == 33 || currDimension == 4">
            <el-cascader
              :options="quarterData"
              size="mini"
              placeholder="开始时间"
              style="width:125px;"
              v-model="startQuarter"
              @change="startQuarterChange"
            ></el-cascader>
            <span class="yeartime">&nbsp;至&nbsp;</span>
            <el-cascader
              :options="quarterData"
              size="mini"
              placeholder="结束时间"
              style="width:125px;"
              v-model="endQuarter"
              @change="endQuarterChange"
            ></el-cascader>
          </div>
          <div class="time" v-if="currDimension == 2">
            <el-date-picker
              class="yeartime"
              v-model="startTime"
              size="mini"
              type="month"
              placeholder="开始月份"
              value-format="yyyy-MM"
              @change="startTimeChange"
            ></el-date-picker>
            <span class="yeartime">&nbsp;至&nbsp;</span>
            <el-date-picker
              class="yeartime"
              v-model="endTime"
              size="mini"
              type="month"
              placeholder="结束月份"
              value-format="yyyy-MM"
              @change="endTimeChange"
            ></el-date-picker>
          </div>

          <div class="macro-menu regiontree-box">
            <el-tree
              node-key="id"
              ref="tableIdenTree"
              :props="tableObj.defaultIdenProps"
              :data="tableObj.tableIdenData"
              lazy
              :highlight-current="true"
              show-checkbox
              @node-click="tableIdenNodeClick"
              @node-expand="tableIdenNodeExpand"
              @check-change="handleCheckChange"
              :check-strictly="true"
              :default-checked-keys="checkIden"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>
                  <i :class="data.icon"></i>
                  {{data.idenName}}
                </span>
              </span>
            </el-tree>
          </div>
        </div>
        <div class="condition-bottom">
          <div
            class="showIdenGroup"
            id="showIdenGroup"
            v-show="showGroup"
            :style="`z-index:${showGroup?'9999':'-99'}`"
          >
            <i class="close closeGroup el-icon-close" @click="closeGroup"></i>
            <div class="idenGroupHead">
              <p>{{currentIdenData.name}}</p>
            </div>
            <div class="idenVersionContain" @click.stop="prentStop">
              <div class="idenVersionItem" v-for="(item,index) in currentIdenData.data" :key="index">
                <p class="versionName">{{item.name}}</p>
                <div class="versionItemContain">
                  <el-checkbox-group v-model="idenCheckList" @change="handleCheckedCitiesChange">
                    <div class="idenItem">
                      <div class="groupItem" v-for="(m,i) in item.idenArr" :key="i">
                        <el-checkbox
                          :label="m.code"
                          :title="m.name"
                        >{{m.name.length>6?m.name.substr(0,6) + '...':m.name}}</el-checkbox>
                      </div>
                    </div>
                  </el-checkbox-group>
                </div>
              </div>
            </div>
          </div>
          <div class="btnBox">
            <el-button
            type="primary searchData"
            size="mini"
            style="background: #1d9cb7;"
            v-loading="loadBtn"
            :disabled="loadBtn?true:false"
            @click="getIdenGRoupValueData"
          >查询</el-button>
          <el-button
            type="primary searchData"
            size="mini"
            style="background: #1d9cb7;"
            @click="openDialogSaveTerm"
          >收藏</el-button>
          </div>
        </div>
    </div>
    <div class="quickSearchContent" v-show="searchTypeName=='quickSearch'">
       <div class="searchlist-box">
        <ul v-for="(item,index) in achievement.saveTermData" :key="index">
          <li>
            <p @click="searchlisthander(item)">
              <i class="el-icon-search"></i>
              {{item.title}}
            </p>
            <i class="el-icon-circle-close" @click="deleteachievement(item,index)"></i>
          </li>
        </ul>
      </div>
    </div>

    <el-dialog
        title="收藏条件"
        :visible.sync="achievement.dialogSaveTermVisible"
        :modal="false"
        :center="true"
        :close-on-click-modal="true"
        custom-class="dialogSaveTerm"
        width="500px"
      >
      <el-form :model="achievement.savetermform" ref="savetermValidateForm" label-width="55px" size="small">
        <el-form-item label="标题"
        prop="title"
        :rules="[
          { required: true, message: '标题不能为空'}
        ]">
          <el-input type="title" v-model="achievement.savetermform.title" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="描述"  prop="memo">
          <el-input v-model="achievement.savetermform.memo" type="memo" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveterm('savetermValidateForm')" size="small">确 定</el-button>
        <el-button @click="closeTermDialog('savetermValidateForm') " size="small">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import sgisLayerBase from "@/utils/map/sfgis.layer.base.js";
import CommonUtils from "../../../utils/commonUtils.js";
import { mapState, mapMutations, mapActions } from "vuex";
import * as macroAPI from "@/pages/macro/api/macro.js";
import macroConfig from "static/config/macro.js";
import axios from "axios";
import Layer from "@/utils/map/lib/main.js"; // 专题图层绘画函数
import sgisSpatialQuery from "@/utils/map/sfgis.spatial.query";
import sgisMapBase from "@/utils/map/sfgis.map.base.js";
import hiddenLayer from "@/utils/map/lib/systemlayers/region.marker.layer.js";
import dataAnalysis from "@/utils/map/sfgis.data.analysis";
import $ from "jquery";
export default {
  name: "time-dimension",
  components: {},
  data() {
    return {
      preRegionFeatures:null, // 记录一下上次区划features
      preRegions:null, // 记录一下上次区划信息
      searchTypeName:"idenSearch",
      dimensions: [],
      loadBtn: false,
      radio: "0",
      current_node: "",
      popup: "",
      themerange_popup: "",
      show_flag: false,
      show_modle: false,
      tableObj: {
        tableIdenData: [], //指标目录
        defaultIdenProps: {
          children: "children",
          label: "idenName",
          isLeaf: "isLeaf"
        }
      },
      showChart: false, //显示需要显示数据的图
      currentIdenCode: "", //当前指标对象
      currentIdenValue: [], //当前指标分组值
      postIdenData: [], //所有所选的指标值及指标分组值
      idenCheckList: [], //当前选中的当前指标分组值
      treeCheckIdenList: [], //树形菜单选中指标
      idenValue: "", //当前选中指标
      showTableObjTree: false,
      currDimension: 1, //激活状态的维度
      startTime: "2017",
      endTime: "2018",
      startQuarter: [],
      currentRegionXY: [], //带坐标的区划信息
      loadData: null, //存储查询出来的总数据
      overLayers: sgisLayerBase.overLayers, // 获取当前的overLayers个数
      endQuarter: [],
      regionCodes: [],
      region_data: [], //获取分段专题图的数据列表
      rangeregion_data: [],
      rangesegment_values: [],
      currentRegion: [],
      currentFeatures: null, //当前专题图所使用的geojson
      selectedOptions: [],
      currenParentData: "", //当前指标的父节点用于判断是否选择同一指标的值
      regionCheck: false, //点击查询后允许直接查询区划及值
      quarterData: [], //季度和半年的初始化数据
      currentIdenData: { name: "", data: [] },
      showCharts: [
        { name: "分段图", ischeck: true, type: "themerange" },
        { name: "符号图", ischeck: false, type: "pictogram" },
        { name: "象形图", ischeck: false, type: "pictogram_xiangxing" }
      ],
      checkIden: [], //已选择的指标
      segment_values: [],//单年份数据值
      achievement:{//快速查询
        saveTermData:[],
        dialogSaveTermVisible:false,//收藏条件弹窗
        savetermform: {
          conditions:{//保存参数
            treeCheckIdenList:[],//选中指标树
            periodTimeData:{},//时间轴
            period_year_months:[],// 日期集合
            regionData:[],//区划数据
            conditions:[]//用于查询参数
          },
          //收藏条件字段
          title: "",
          memo: ""
        },
      },
      selectedRegionData:[]//存储选中的区划

    };
  },
  mounted() {
    let that = this;
    //获取权限方法
    var userInfo = localStorage.getExpire("userInfo");
    var token_type = localStorage.getExpire("token_type");
    var access_token = localStorage.getExpire("access_token");
    this.getReportType(data => {
      this.dimensions = data;
    });
    if (userInfo && token_type && access_token) {
      that.Authorization = token_type + " " + access_token;
      that.macroPower = JSON.parse(userInfo).permissions;
      this.getRootMacroIndexMenu();
      this.getAchievementByType();
      let nowDate = new Date();
      let year = nowDate.getFullYear();
      this.endTime = JSON.stringify(year);
      this.startTime = JSON.stringify(year - 4);
      let reportArr = [];
      for (let i = year; i >= this.startTime; i--) {
        reportArr.push(i + "-" + "0");
      }
      this.$store.commit("setUnionQueryCondition", {
        key: "period_year_months",
        val: reportArr,
        type: 1
      });
      EventBus.$on("updateRegions", this.updateRegions);
      EventBus.$on("change-layer-data", this.changeLayerData);
      EventBus.$on("iden-change", this.getNewIden);
      EventBus.$on("onLayer-action", this.layerHeightLight);
      EventBus.$on(
        "formateChangeCurrentData-spatialAnalysis",
        this.changeFormateData
      );
      EventBus.$on("clearSearchResult", this.clearAll);
      EventBus.$on("clearSearchBeafule", this.clearAll);
      EventBus.$on("creatThemerange", this.createThemerange);
      EventBus.$on("creatRangeThemeLayer", this.creatRangeThemeLayer);
      EventBus.$on("off-range-themerange", this.highLightRangeThemeLayer);
    }
  },
  computed: {
    mapLayers: {
      get() {
        return this.$store.state.macro.mapLayers;
      },
      set(val) {
        // this.$store.commit("getMapLayers", val);
      }
    },
    ...mapState({
      currentTime: state => state.macro.currentTime,
      unionQueryCondition: state => state.macro.unionQueryCondition,
      currQuotaGroups: state => state.macro.currQuotaGroups,
      currentRegionData: state => state.macro.currentRegionData,
      creatCharts: state => state.macro.creatCharts,
      currentLayerIdenValue: state => state.macro.currentLayerIdenValue,
      currentLayerCode: state => state.macro.currentLayerCode,
      layerIdens: state => state.macro.layerIdens,
      regionCodeArray: state => state.macro.regionCodeArray,
      currentIdens: state => state.macro.currentIdens,
      currentYearMonth: state => state.macro.currentYearMonth,
      periodType: state => state.macro.periodType,
      showGroup: state => state.macro.showGroup,
      themerangeIden: state => state.macro.themerangeIden,
      mapLayeriden: state => state.macro.themerangeIden,
      currentIdenName: state => state.macro.currentIdenName
    })
  },
  methods: {
    ...mapMutations([
      "changeShowEchartPanel",
      "changeShowDataTable",
      "addQuotaMetaDatas",
      "changeCurrentTime",
      "setCurrentIdenCode",
      "changePeriodType",
      "addOtherLegend"
    ]),
    prentStop() {
      // console.log('yes')
    },

    clearAll(sure) {
      if (this.currentIdens.length) {
        const map = sgisMapBase.getMap();
        //删除分段专题图的图层
        if (map.overlayers["themerange"]) {
          map.overlayers["themerange"].remove();
        }
        //删除符号图的图层
        if (map.overlayers["pictogram"]) {
          map.overlayers["pictogram"][0].remove();
        }
        //删除排名图
        if (map.overlayers["ranking"]) {
          map.overlayers["ranking"][0].remove();
        }
        //删除象形图的图层
        if (map.overlayers["gradesymbol"]) {
          map.overlayers["gradesymbol"][0].remove();
        }
        //删除分段2d图
        if (map.overlayers["rangeThemeLayer"]) {
          map.overlayers["rangeThemeLayer"].removeFromMap();
        }
        $(".bar_chart").remove();

        $(".pie_chart").remove();

        $(".rosediagram_chart").remove();

        $(".circulargraph_chart").remove();
        //清除已选指标分组
        this.$store.commit("chartValue", "");
        if (!sure) {
          //清空树形菜单的默认项
          this.$refs.tableIdenTree.setCheckedKeys([]);
          this.treeCheckIdenList = [];
          this.checkIden = [];
          //清空指标分组值
          this.idenCheckList = [];
          //清空选择完毕后的指标及指标分组值
          this.postIdenData = [];
        }
        this.$store.commit("changePlay", false);
        this.$store.commit("clearLayer");
        //删除选中指标
        this.$store.commit("changeIdens", []);
        //隐藏图标模板
        this.$store.commit("changeShowEchartPanel", false);
        //隐藏表格
        this.$store.commit("changeShowDataTable", false);
        //清空查询后的时间
        this.$store.commit("getYearMonth", []);

        //清空当前所有专题图的列表
        this.$store.commit("deletMapLayers", []);
        //清空当前年份
        this.$store.commit("changeCurrentYearMonth", "");
        //清空当前指标名称
        this.$store.commit("deleteIdenName", "");
        //清空存储在地图里的layer
        for (let key in map.overlayerInfos) {
          delete map.overlayerInfos[key];
        }
        //清空存储在地图里的layerInfo
        for (let key in map.overlayers) {
          delete map.overlayers[key];
        }
      }
    },
    //获取收藏条件
    getAchievementByType(){
      let that = this;
      let req = {
        type :1
      }
      macroAPI
        .getAchievementByType(req)
        .then(res => {
          if (res.message == "success") {
            that.achievement.saveTermData = res.data;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //打开收藏条件弹窗
    openDialogSaveTerm() {
      let that = this;
      // EventBus.$emit("clearSearchBeafule", true);
      this.treeCheckIdenList = this.$refs.tableIdenTree.getCheckedNodes();
      if (!this.regionCodes.length || !this.treeCheckIdenList.length) {
        this.$message({
          message: "请检查是否已选择区划及指标",
          type: "warning"
        });
        return false;
      }
      let time = "2019-0";
      let timeArr = this.unionQueryCondition.period_year_months;
      this.region_data = [];

      that.achievement.savetermform.conditions.treeCheckIdenList = this.treeCheckIdenList;

      let req = this.formateMacroParams(
      timeArr,
      this.regionCodes,
      this.treeCheckIdenList,
      this.postIdenData,
      this.currDimension
      );
      if(req.conditions.length>0){
        that.achievement.savetermform.conditions.period_year_months = timeArr;
        that.achievement.savetermform.conditions.regionData = this.selectedRegionData;
        that.achievement.savetermform.conditions.conditions = req;
        that.achievement.dialogSaveTermVisible = true;
      }else{
        this.$message({
          message: "请先检查是否已选择区划及指标",
          type: "err"
        });
      }
    },
    //关闭收藏条件弹框
    closeTermDialog(formName){
      this.$refs[formName].resetFields();
      this.achievement.dialogSaveTermVisible = false;
    },
    //收藏条件
    saveterm(formName) {
      let that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let args = {
            conditions:JSON.stringify(that.achievement.savetermform.conditions),
            title:that.achievement.savetermform.title,
            memo:that.achievement.savetermform.memo,
            type:1
          };

          axios({
            method: 'post',
            url:macroConfig.addAchievement,
            data:args,
          })
            .then(function (res) {
              if(res.status=="200"){
                if (res.data.message == "success") {
                  that.$message({
                    message: "收藏条件成功",
                    type: "success"
                  });
                  that.getAchievementByType();
                  that.closeTermDialog(formName);
                }else{
                  that.$message({
                    message: res.data.message,
                    type: 'error'
                  });
                }
              }
            })
            .catch(function (error) {
              console.log(error);
            });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //查询条件详情
    searchlisthander(item){
      let that = this;
      let args = {
        id: item.id
      };
      macroAPI
        .getAchievementInfoById(args)
        .then(res => {
          if (res.message == "success") {
            let data = res.data.conditions;
            let req = JSON.parse(data)
            this.treeCheckIdenList = req.treeCheckIdenList;
            this.selectedRegionData = req.regionData;
            let region_codes = req.conditions.region_codes;
            this.getCurrentRegionList(region_codes, newArr => {
              this.$store.commit("getCurrentRegionXY", newArr);//存储chart带坐标的区划
              EventBus.$emit("onlyUpdateRegion", this.selectedRegionData);//更新区划面板选中区划
              this.$store.commit("getReigonInfo",this.selectedRegionData);//更新全局区划
              that.renderTimeLine(req.period_year_months,req.formateDateTime);
              that.getIdenData(req.conditions,function(res){
                that.renderMacroPage(res,true);
              });
            });

          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //用数组直接更新时间轴
    renderTimeLine(period_year_months,formateDateTime){
      if(formateDateTime&&formateDateTime.length>0){
        this.$store.commit("setUnionQueryCondition", {
          key: "period_year_months",
          val: period_year_months,
          type: formateDateTime[0].type
        });
      }else{//第一次没有选择时间
        this.$store.commit("setUnionQueryCondition", {
          key: "period_year_months",
          val: period_year_months,
          type: 1
        });
      }
    },
    //删除条件
    deleteachievement(item,index){
      let that = this;
      let args = {
        id: item.id
      };
      macroAPI
        .deleteAchievementById(args)
        .then(res => {
          if (res.message == "success") {
            that.achievement.saveTermData.splice(index, 1);
            that.$message({
              message: "删除条件成功",
              type: "success"
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //高亮专题图
    layerHeightLight(region) {
      const map = sgisMapBase.getMap();
      if (
        map.overlayers["themerange"] &&
        !map.overlayerInfos["themerange"].hidden
      ) {
        map.overlayers["themerange"].data.map(item => {
          if (item.properties.QH_CODE == region.regionCode) {
            let hoverData = Object.assign({}, item);
            hoverData.heightColor = true;
            map.overlayers["themerange"].addData(hoverData);
            if (!this.themerange_popup) {
              this.themerange_popup = new mapboxgl.Popup({
                anchor: "bottom",
                closeButton: false,
                offset: {
                  bottom: [0, -10]
                }
              });
            }
            if(region.hasOwnProperty("data")){
              let innerHtml = `<span>区划名称：${
                hoverData.properties.QH_NAME
              }</span></br><span>${this.currentIdenName["themerange"]}：${
                hoverData.properties.value
              }</span>`;
              this.themerange_popup.setHTML(innerHtml);
              this.themerange_popup.setLngLat([region.data.x, region.data.y]);
              this.themerange_popup.addTo(map);
            }

          }
        });
      }
      if (
        map.overlayers["rangeThemeLayer"] &&
        !map.overlayerInfos["rangeThemeLayer"].hidden
      ) {
        if (map.overlayers["rangeThemeLayer"].features.length) {
          map.overlayers["rangeThemeLayer"].getFeatures().map((item, index) => {
            if (item.data.QH_CODE == region.regionCode) {
              var hShapes = map.overlayers[
                "rangeThemeLayer"
              ].getShapesByFeatureID(item.id);
              map.overlayers["rangeThemeLayer"].renderer.updateHoverShapes(
                hShapes
              );
              let fea = map.overlayers["rangeThemeLayer"].getFeatureById(
                item.id
              );
              if (!this.popup) {
                this.popup = new mapboxgl.Popup({
                  anchor: "bottom",
                  closeButton: false,
                  offset: {
                    bottom: [0, -10]
                  }
                });
              }
              let innerHtml = `<span>区划名称：${
                fea.data.NAME
              }</span></br><span>${this.currentIdenName["rangeThemeLayer"]}：${
                fea.data.value
              }</span>`;
              this.popup.setHTML(innerHtml);
              this.popup.setLngLat([region.data.x, region.data.y]);
              this.popup.addTo(map);
            }
          });
        }
      }
    },
    highLightRangeThemeLayer() {
      if (this.popup) {
        this.popup.remove();
      }
      if (this.themerange_popup) {
        this.themerange_popup.remove();
      }
    },
    getNewIden(iden) {
      // this.currentIdens.map(item => {
      //   if (item.id == iden) {
      //   }
      // });
    },
    changeFormateData(data) {
      const map = sgisMapBase.getMap();
      if (data && Object.keys(data.formateData.formatValue).length) {
        if (map.overlayers["themerange"]) {
          let idenCode = this.themerangeIden.split("_")[0];
          if (this.themerangeIden.split("_")[1]) {
            let idenVal = this.themerangeIden.split("_")[1];
            this.createdLayers(
              "themerange",
              this.regionCodeArray,
              idenCode,
              data.formateData,
              idenVal,
              true
            );
          } else {
            this.createdLayers(
              "themerange",
              this.regionCodeArray,
              idenCode,
              data.formateData,
              "",
              true
            );
          }
        }
        //删除，更新时间轴，一个数据到这里会导致不绘制
        //  else if (Object.keys(map.overlayers).length) {
        // }
         else {
          let idenCode = this.themerangeIden.split("_")[0];
          if (this.themerangeIden.split("_")[1]) {
            let idenVal = this.themerangeIden.split("_")[1];
            this.createdLayers(
              "themerange",
              this.regionCodeArray,
              idenCode,
              data.formateData,
              idenVal
            );
          } else {
            this.createdLayers(
              "themerange",
              this.regionCodeArray,
              idenCode,
              data.formateData,
              ""
            );
          }
        }
      } else {
        if (map.overlayers["themerange"]) {
          map.overlayers["themerange"].setData([]);
        }
      }
    },
    changeLayerData(data) {
      let idenCode = data.iden.split("_")[0];
      if (data.iden.split("_")[1]) {
        let idenVal = data.iden.split("_")[1];
        this.getNewFeaturesData(idenCode, idenVal);
      } else {
        this.getNewFeaturesData(idenCode);
      }
    },
    getNewFeaturesData(idenCode, idenVal) {
      if (idenVal) {
        this.createdLayers(
          "themerange",
          this.regionCodes,
          idenCode,
          this.loadData,
          idenVal
        );
      } else {
        this.createdLayers(
          "themerange",
          this.regionCodes,
          idenCode,
          this.loadData,
          ""
        );
      }
    },
    //获取指标对象目录
    getRootMacroIndexMenu() {
      let that = this;
      let req = {
        parid: "root"
      };
      this.getMacroIndexMenu(req, function(data) {
        that.tableObj.tableIdenData = data;
      });
    },
    //查询指标目录
    getMacroIndexMenu(req, callback) {
      macroAPI
        .macroIdenMenu(req)
        .then(res => {
          if (res.message == "success") {
            let data = res.data;
            for (let i in data) {
              data[i].children = [];
              data[i].type = "menu";
              data[i].isLeaf = false;
              data[i].disabled = true;
              data[i].icon = "el-icon-folder";
            }

            callback(data);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //直接选中指标时触发
    handleCheckChange(node, checkState, l) {
      if (checkState && this.checkIden.indexOf(node.id) == -1) {
        this.checkIden.push(node.id);
        this.postIdenData.push({
          id: node.id,
          idenCode: node.idenCode,
          data: []
        });
      } else if (!checkState) {
        this.checkIden.map((item, index) => {
          if (node.id == item) {
            this.checkIden.splice(index, 1);
          }
        });
        this.postIdenData.map((item, index) => {
          if (node.id == this.currentIdenCode.id) {
            this.idenCheckList = [];
          }
          if (node.id == item.id) {
            this.postIdenData.splice(index, 1);
          }
        });
      }
    },
    //指标目录树点击
    tableIdenNodeClick(node, data, value) {
      this.currentIdenCode = node;
      this.$store.commit("changeShowGroup", false);
      let that = this;
      this.showChart = false;
      if (node.type == "menu") {
        if (data.expanded) {
          node.icon = "el-icon-folder-opened";
        } else {
          node.icon = "el-icon-folder";
        }
      }
      if (node.type == "tableIden") {
        if (this.currenParentData) {
          if (this.currenParentData != node.parid) {
            this.postIdenData = [];
            this.idenCheckList = [];
            this.checkIden = [];
            this.$refs.tableIdenTree.setCheckedKeys(this.checkIden);
            this.currenParentData = node.parid;
          }
        } else {
          this.currenParentData = node.parid;
        }
        this.$store.commit("setCurrentIdenCode", this.currentIdenCode.idenCode);
        let showIdenGroup = document.getElementById("showIdenGroup");
        showIdenGroup.style.top =
          value.$el.getBoundingClientRect().top - 48 + "px";
        if (
          document.getElementById("app").offsetHeight -
            value.$el.getBoundingClientRect().top <
          showIdenGroup.offsetHeight
        ) {
          showIdenGroup.style.bottom = 0 + "px";
        }

        let req = {
          iden_code: this.currentIdenCode.idenCode
        };
        macroAPI
          .idenGroupList(req)
          .then(res => {
            if (res.message == "success" && res.data.length) {
              this.currentIdenData = { name: "", data: [] };
              let data = res.data;
              this.currentIdenData.name = this.currentIdenCode.idenName;
              let idenKey = [];
              data.map(item => {
                idenKey.push(item.mname);
              });
              idenKey = Array.from(new Set(idenKey));
              idenKey.map(item => {
                let idenObj = {};
                let idenArr = [];
                for (let i = 0; i < data.length; i++) {
                  if (item == data[i].mname) {
                    idenArr.push(data[i]);
                  }
                }
                idenObj.name = item;
                idenObj.idenArr = idenArr;
                this.currentIdenData.data.push(idenObj);
              });
              this.currentIdenValue = data;
              this.idenCheckList = [];
              this.postIdenData.map(item => {
                if (item.id == node.id) {
                  this.idenCheckList = item.data;
                }
              });

              this.$store.commit("changeShowGroup", true);
            }
          })
          .catch(error => {
            console.log(error);
          });
        this.current_node = node.id;
        this.$store.commit("addQuotaMetaDatas", data.data);
      }
    },

    handleCheckedCitiesChange(val) {
      let iscreat = this.checkIden.some(item => {
        if (item == this.currentIdenCode.id) {
          this.postIdenData.map(item => {
            if (item.id == this.currentIdenCode.id) {
              item.data = val;
            }
          });
          return true;
        }
      });
      if (!iscreat && val.length) {
        this.checkIden = this.$refs.tableIdenTree.getCheckedKeys();
        this.checkIden.push(this.currentIdenCode.id);
        this.postIdenData.push({
          id: this.currentIdenCode.id,
          idenCode: this.currentIdenCode.idenCode,
          data: val
        });
        this.$refs.tableIdenTree.setCheckedKeys(this.checkIden);
      }
    },
    //查询综合指标
    tableIdenNodeExpand(node) {
      let that = this;
      if (node.children.length < 1) {
        let req = {
          parid: node.id
        };
        let tableIdenReq = {
          parid: node.id
        };
        that.getMacroIndexMenu(req, function(menudata) {
          let arr = menudata;
          that.getMacroIden(tableIdenReq, function(tableIdenData) {
            arr.push(...tableIdenData);
            node.children = arr;
          });
        });
      }
    },
    //查询综合指标
    getMacroIden(req, callback) {
      macroAPI
        .macroIdenList(req)
        .then(res => {
          if (res.message == "success" && res.data.length) {
            let data = res.data;
            for (let i in data) {
              data[i].children = [];
              data[i].type = "tableIden";
              data[i].isLeaf = true;
              data[i].showCheckbox = true;
            }
            callback(data);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    timeTypeChange(val) {
      this.currDimension = val;
      this.startQuarter = [];
      this.endQuarter = [];
      this.quarterData = [];
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      if (val == 32) {
        let reportQuarter = Math.ceil(month / 3);
        this.endQuarter = [year, reportQuarter];
        this.startQuarter = [year - 1, reportQuarter];
        let arr = CommonUtils.getPeriodByStartEnd(
          year - 1,
          reportQuarter,
          year,
          reportQuarter,
          32
        );
        this.formateDateTime(arr);
      } else if (val == 33) {
        let reportQuarter = Math.ceil(month / 3);
        this.endQuarter = [year, reportQuarter];
        this.startQuarter = [year - 1, reportQuarter];
        let arr = CommonUtils.getPeriodByStartEnd(
          year - 1,
          reportQuarter,
          year,
          reportQuarter,
          33
        );
        this.formateDateTime(arr);
      } else if (val == 4) {
        let report_qua = "";
        if (month > 6) {
          report_qua = 2;
          this.endQuarter = [year, report_qua];
          this.startQuarter = [year - 2, report_qua];
        } else {
          report_qua = 1;
          this.endQuarter = [year, report_qua];
          this.startQuarter = [year - 2, report_qua];
        }
        let arr = CommonUtils.getPeriodByStartEnd(
          year - 2,
          report_qua,
          year,
          report_qua,
          4
        );
        this.formateDateTime(arr);
      } else if (val == 1) {
        this.endTime = JSON.stringify(year);
        this.startTime = JSON.stringify(year - 4);
        let arr = CommonUtils.getPeriodByStartEnd(
          this.startTime,
          0,
          this.endTime,
          0,
          1
        );
        this.formateDateTime(arr);
      } else if (val == 2) {
        this.startTime = `${year}-${month - 4}`;
        this.endTime = `${year}-${month}`;
        let arr = CommonUtils.getPeriodByStartEnd(
          year,
          month - 4,
          year,
          month,
          2
        );
        this.formateDateTime(arr);
      }
      if (val == 32 || val == 33 || val == 4) {
        let prepareData = null;
        for (let i = year; i > year - 10; i--) {
          if (val == "4") {
            prepareData = {
              value: i,
              label: i,
              children: [
                {
                  value: 1,
                  label: "上半年"
                },
                {
                  value: 2,
                  label: "下半年"
                }
              ]
            };
          } else {
            prepareData = {
              value: i,
              label: i,
              children: [
                {
                  value: 1,
                  label: "第一季度"
                },
                {
                  value: 2,
                  label: "第二季度"
                },
                {
                  value: 3,
                  label: "第三季度"
                },
                {
                  value: 4,
                  label: "第四季度"
                }
              ]
            };
          }
          this.quarterData.push(prepareData);
        }
      }
    },
    startTimeChange(val) {
      let curdisn = this.currDimension;
      if (curdisn == 1) {
        if (this.endTime) {
          if (this.endTime < val) {
            this.endTime = "";
            this.warnMessage();
            return;
          }
          let arr = CommonUtils.getPeriodByStartEnd(
            this.startTime,
            0,
            this.endTime,
            0,
            1
          );
          this.formateDateTime(arr);
        }
      } else if (curdisn == 2) {
        let startDate = val.split("-");
        if (this.endTime) {
          let endDate = this.endTime.split("-");
          if (
            startDate[0] > endDate[0] ||
            (startDate[0] == endDate[0] && startDate[1] > endDate[1])
          ) {
            this.endTime = "";
            this.warnMessage();
            return;
          }
          let arr = CommonUtils.getPeriodByStartEnd(
            startDate[0],
            startDate[1],
            endDate[0],
            endDate[1],
            2
          );
          this.formateDateTime(arr);
        }
      }
    },
    endTimeChange(val) {
      let curdisn = this.currDimension;
      if (curdisn == 1) {
        if (this.startTime) {
          if (this.startTime > val) {
            this.endTime = "";
            this.warnMessage();
            return;
          }
          let arr = CommonUtils.getPeriodByStartEnd(
            this.startTime,
            0,
            this.endTime,
            0,
            1
          );
          this.formateDateTime(arr);
        }
      } else if (curdisn == 2) {
        let endDate = val.split("-");
        if (this.startTime) {
          let startDate = this.startTime.split("-");
          if (
            endDate[0] < startDate[0] ||
            (endDate[0] == startDate[0] && endDate[1] < startDate[1])
          ) {
            this.endTime = "";
            this.warnMessage();
            return;
          }
          let arr = CommonUtils.getPeriodByStartEnd(
            startDate[0],
            startDate[1],
            endDate[0],
            endDate[1],
            2
          );
          this.formateDateTime(arr);
        }
      }
    },
    startQuarterChange(val) {
      if (this.endQuarter.length) {
        if (
          val[0] > this.endQuarter[0] ||
          (val[0] == this.endQuarter[0] && val[1] > this.endQuarter[1])
        ) {
          this.endQuarter = [];
          this.warnMessage();
          return;
        }
        let arr = CommonUtils.getPeriodByStartEnd(
          val[0],
          val[1],
          this.endQuarter[0],
          this.endQuarter[1],
          parseInt(this.currDimension)
        );
        this.formateDateTime(arr);
      }
    },
    endQuarterChange(val) {
      if (this.startQuarter.length) {
        if (
          this.startQuarter[0] > val[0] ||
          (val[0] == this.startQuarter[0] && val[1] < this.startQuarter[1])
        ) {
          this.endQuarter = [];
          this.warnMessage();
          return;
        }
        let arr = CommonUtils.getPeriodByStartEnd(
          this.startQuarter[0],
          this.startQuarter[1],
          val[0],
          val[1],
          parseInt(this.currDimension)
        );
        this.formateDateTime(arr);
      }
    },
    handleChange(value) {},
    warnMessage() {
      this.$message({
        message: "起始时间不能大于结束时间！",
        type: "warning"
      });
    },
    formateDateTime(dates) {
      this.achievement.savetermform.conditions.formateDateTime = dates;
      let dateArr = [];
      dates.map(date => {
        dateArr.push(date.year + "-" + date.month);
      });
      this.$store.commit("setUnionQueryCondition", {
        key: "period_year_months",
        val: dateArr,
        type: dates[0].type
      });
    },
    //组装查询综合数据条件
    formateMacroParams(
      timeArr,
      regionList,
      idenList,
      idenGroupList,
      period_type
      ){
      let req = {
        conditions: [],
        period_type: period_type,
        period_year_months: timeArr,
        region_codes: regionList
      };
      //循环渲染所有区对应的总值
      for (let i = 0; i < regionList.length; i++) {
        for (let j = 0; j < idenList.length; j++) {
          let obj = {
            iden_code: idenList[j].idenCode,
            iden_code_hac: idenList[j].idenCode,
            iden_cop_type: "",
            idenvl_code: regionList[i],
            idenvl_code_hac: regionList[i],
            region_code: regionList[i]
          };
          req.conditions.push(obj);
        }
      }
      //渲染循环每个区划对应的每个指标的分组值
      for (let i = 0; i < regionList.length; i++) {
        for (let j = 0; j < idenGroupList.length; j++) {
          for (let n = 0; n < idenGroupList[j].data.length; n++) {
            let obj = {
              iden_code: idenGroupList[j].idenCode,
              iden_code_hac: idenGroupList[j].idenCode,
              iden_cop_type: "",
              idenvl_code: idenGroupList[j].data[n],
              idenvl_code_hac: idenGroupList[j].data[n],
              region_code: regionList[i]
            };
            req.conditions.push(obj);
          }
        }
      }
      return req;
    },
    //查询综合数据
    getIdenData(req,callback) {
      axios({
        method: "post",
        url: macroAPI.getMacroData().requestUrl,
        data: req
      })
        .then(response => {
          if (response.status == 200) {
            let data = response.data;
            callback&&callback(data);
          } else {
            this.loadBtn = false;

            this.$message({
              message: res.message,
              type: "error"
            });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    closeGroup() {
      this.$store.commit("changeShowGroup", false);
    },

    //选择分组后进行查询数据
    getIdenGRoupValueData() {
      let that = this;
      EventBus.$emit("clearSearchBeafule", true);
      this.treeCheckIdenList = this.$refs.tableIdenTree.getCheckedNodes();
      if (!this.regionCodes.length || !this.treeCheckIdenList.length) {
        this.$message({
          message: "请检查是否已选择区划及指标",
          type: "warning"
        });
        return false;
      }
      this.loadBtn = true;
      let time = "2019-0";
      let timeArr = this.unionQueryCondition.period_year_months;
      this.region_data = [];

      let req = this.formateMacroParams(
      timeArr,
      this.regionCodes,
      this.treeCheckIdenList,
      this.postIdenData,
      this.currDimension
      );
      this.getIdenData(req,function(res){
        that.renderMacroPage(res);
      });
    },
    //渲染综合页面
    renderMacroPage(res,isChange){
      let time = "2019-0";
      let timeArr = this.unionQueryCondition.period_year_months;
      if (res.code == "0") {
        if (JSON.stringify(res.data.formatValue) == "{}") {
          this.$message({
            message: "暂无数据",
            type: "warning"
          });
          this.loadBtn = false;
        } else {
          this.$store.commit("changeCurrentTime", time);
          this.regionCodes = Array.from(new Set(res.data.region_codes));
          this.$store.commit("changeRegionCodeArray", this.regionCodes);
          this.$store.commit("changeCurrQuotaGroups", this.postIdenData);
          this.$store.commit("changeIdens", this.treeCheckIdenList);
          this.$store.commit("changePeriodType", "1");
          this.$store.commit("showIndexType", this.currDimension);
          this.$store.commit("setStartTime", this.startTime);
          this.$store.commit("changeShowEchartPanel", true);

          this.$store.commit(
            "changeLayerIdenCode",
            this.treeCheckIdenList[0].idenCode
          );
          this.$store.commit("changeLayerIdens", this.postIdenData);
          let that = this;

          this.$store.commit("changeShowGroup", false);
          this.regionCheck = true;
          this.loadData = res.data;
          this.$store.commit("changCurrentIdenName", {
            type: "themerange",
            value: this.treeCheckIdenList[0].idenName
          });
          timeArr.sort((a, b) => {
            return parseInt(a) - parseInt(b);
          });
          this.$store.commit(
            "changeCurrentYearMonth",
            timeArr[timeArr.length - 1]
          );

          let timeLine = [];
          for (let key in res.data.values) {
            timeLine.push(key);
          }
          this.$store.commit("getYearMonthData", timeLine);
          this.$store.commit("getYearMonth", timeArr);
          this.$store.commit("changeShowTimeLine", true);
          this.$store.commit(
            "themerangeIden",
            this.treeCheckIdenList[0].idenCode
          );
          this.createdLayers(
            "themerange",
            this.regionCodes,
            this.treeCheckIdenList[0].idenCode,
            this.loadData,
            "",undefined
          );
          if (this.mapLayeriden["rangeThemeLayer"]) {
            this.creatRangeThemeLayer({
              iden: this.mapLayeriden["rangeThemeLayer"],
              data: { formateData: res.data },
              ischange: false
            });
          }
          EventBus.$emit("formateTableData-spatialAnalysis", {
            formateData: res.data
          });
          this.loadBtn = false;
        }
      } else {
        this.loadBtn = false;
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
    creatRangeThemeLayer(data) {
      const map = sgisMapBase.getMap();
      this.loadData = data.data.formateData;
      if (data.iden.split("_")[1]) {
        this.creatRange(
          "rangeThemeLayer",
          this.regionCodes,
          data.iden.split("_")[0],
          this.loadData,
          data.iden.split("_")[1],
          data.ischange
        );
      } else {
        this.creatRange(
          "rangeThemeLayer",
          this.regionCodes,
          data.iden.split("_")[0],
          this.loadData,
          "",
          data.ischange
        );
      }
    },
    createThemerange(data) {
      this.loadData = data.data.formateData;
      if (data.iden.split("_")[1]) {
        this.createdLayers(
          "themerange",
          this.regionCodes,
          data.iden.split("_")[0],
          this.loadData,
          data.iden.split("_")[1]
        );
      } else {
        this.createdLayers(
          "themerange",
          this.regionCodes,
          data.iden.split("_")[0],
          this.loadData
        );
      }
    },
    //创建2D专题图
    creatRange(
      type,
      regions,
      idenCode,
      allData,
      currentIden,
      isChange,
      callback
    ) {
      let timeChange = false;
      this.rangesegment_values = [];
      this.rangeregion_data = [];
      let all_segment_values = [];//存储所有年份的数值


      for(let i in allData.formatValue){
        if(i.indexOf(idenCode)!=-1){
          let obj = allData.formatValue[i];
          all_segment_values.push(obj.value == "null" ||obj.value == "-"? 0: obj.value);
        }
      }


      regions.map(item => {
        if (currentIden) {
          let key = `${item}-${idenCode}-${currentIden}-${this.periodType}-${idenCode}-${currentIden}-${this.currentYearMonth}`;
          if (allData.formatValue[key]) {
            this.rangeregion_data.push({
              regioncode: item,
              rname: "ST_R_SH",
              regiontype: "1",
              value:
                allData.formatValue[key].value == "null" ||
                allData.formatValue[key].value == "-"
                  ? 0
                  : allData.formatValue[key].value
            });
            if ((item = "510000000000")) {
              this.$store.commit(
                "currentIdenrangeThemanger",
                allData.formatValue[key].value == "null" ||
                  allData.formatValue[key].value == "-"
                  ? 0
                  : allData.formatValue[key].value
              );
            }
            this.rangesegment_values.push(
              allData.formatValue[key].value == "null" ||
                allData.formatValue[key].value == "-"
                ? 0
                : allData.formatValue[key].value
            );
          }
        } else {
          let key = `${item}-${idenCode}-${item}-${this.periodType}-${idenCode}-${item}-${this.currentYearMonth}`;
          if (allData.formatValue[key]) {
            this.rangeregion_data.push({
              regioncode: item,
              rname: "ST_R_SH",
              regiontype: "1",
              value:
                allData.formatValue[key].value == "null" ||
                allData.formatValue[key].value == "-"
                  ? 0
                  : allData.formatValue[key].value
            });
            if ((item = "510000000000")) {
              this.$store.commit(
                "currentIdenrangeThemanger",
                allData.formatValue[key].value == "null" ||
                  allData.formatValue[key].value == "-"
                  ? 0
                  : allData.formatValue[key].value
              );
            }
            this.rangesegment_values.push(
              allData.formatValue[key].value == "null" ||
                allData.formatValue[key].value == "-"
                ? 0
                : allData.formatValue[key].value
            );
          }
        }
      });
      const map = sgisMapBase.getMap();
      if (map.overlayers[type] && !isChange) {
        if (map.overlayers["rangeThemeLayer"]) {
          if (map.overlayers["rangeThemeLayer"].features.length) {
            map.overlayers["rangeThemeLayer"].removeFromMap();
          }
        }
      }
      if (isChange && map.overlayers[type]) {
        map.overlayers[type].removeFeatures();
        if (currentIden) {
          this.getNewFeatures(this.rangeregion_data, type);
          this.mapLayers.map(item => {
            if (item.type == "rangeThemeLayer") {
              item["ident"] = idenCode + "_" + currentIden;
            }
          });
        } else {
          this.getNewFeatures(this.rangeregion_data, type);
          this.mapLayers.map(item => {
            if (item.type == "rangeThemeLayer") {
              item["ident"] = idenCode;
            }
          });
        }
      } else {
        this.$store.commit("addLayer", "rangeThemeLayer");
        let layerData = {
          type: "rangeThemeLayer",
          name: "分段专题图2D",
          data: {
            id: "rangeThemeLayer",
            name: "分段专题图2D",
            datas: [
              {
                rangesegment_values: this.rangesegment_values,
                values: this.rangeregion_data,
                all_segment_values:all_segment_values
              }
            ]
          }
        };
        let layerInfo = Layer.rangeThemeLayer.createLayer(
          map,
          layerData.data,
          () => {
            this.mapLayers.map(item => {
              if (item.type == "rangeThemeLayer") {
                if (currentIden) {
                  item["ident"] = idenCode;
                  let currentLayerIden = {
                    type: "rangeThemeLayer",
                    iden: idenCode + "_" + currentIden
                  };
                  hiddenLayer.hideLayer(sgisMapBase.map);
                  this.$store.commit("getMapLayeriden", currentLayerIden);
                  EventBus.$emit("currentLayerHidden", "rangeThemeLayer");
                } else {
                  item["ident"] = idenCode;
                  let currentLayerIden = {
                    type: "rangeThemeLayer",
                    iden: idenCode
                  };
                  hiddenLayer.hideLayer(sgisMapBase.map);
                  this.$store.commit("getMapLayeriden", currentLayerIden);
                  EventBus.$emit("currentLayerHidden", "rangeThemeLayer");
                }
                EventBus.$emit("timechange-awite", true);
              }
            });
          }
        );
      }
    },
    //创建3d专题图
    createdLayers(
      type,
      regions,
      idenCode,
      allData,
      currentIden,
      isChange,
      callback
    ) {
      let that = this;
      let timeChange = false;
      this.segment_values = [];
      this.region_data = [];
      let all_segment_values = [];//存储所有年份的数值

      for(let i in allData.formatValue){
        if(i.indexOf(idenCode)!=-1){
          let obj = allData.formatValue[i];
          all_segment_values.push(obj.value == "null" ||obj.value == "-"? 0: obj.value);
        }
      }
      regions.map(item => {
        if (currentIden) {
          let key = `${item}-${idenCode}-${currentIden}-${this.periodType}-${idenCode}-${currentIden}-${this.currentYearMonth}`;
          if (allData.formatValue[key]) {
            that.region_data.push({
              regioncode: item,
              rname: "ST_R_SH",
              regiontype: "1",
              value:
                allData.formatValue[key].value == "null" ||
                allData.formatValue[key].value == "-"
                  ? 0
                  : allData.formatValue[key].value
            });
            if ((item = "510000000000")) {
              this.$store.commit(
                "currentIdenThemanger",
                allData.formatValue[key].value == "null" ||
                  allData.formatValue[key].value == "-"
                  ? 0
                  : allData.formatValue[key].value
              );
            }
            that.segment_values.push(
              allData.formatValue[key].value == "null" ||
                allData.formatValue[key].value == "-"
                ? 0
                : allData.formatValue[key].value
            );
          }
        } else {
          let key = `${item}-${idenCode}-${item}-${this.periodType}-${idenCode}-${item}-${this.currentYearMonth}`;
          if (allData.formatValue[key]) {
            that.region_data.push({
              regioncode: item,
              rname: "ST_R_SH",
              regiontype: "1",
              value:
                allData.formatValue[key].value == "null" ||
                allData.formatValue[key].value == "-"
                  ? 0
                  : allData.formatValue[key].value
            });
            if ((item = "510000000000")) {
              this.$store.commit(
                "currentIdenThemanger",
                allData.formatValue[key].value == "null" ||
                  allData.formatValue[key].value == "-"
                  ? 0
                  : allData.formatValue[key].value
              );
            }
            that.segment_values.push(
              allData.formatValue[key].value == "null" ||
                allData.formatValue[key].value == "-"
                ? 0
                : allData.formatValue[key].value
            );
          }
        }

      });
      const map = sgisMapBase.getMap();
      if (map.overlayers[type] && !isChange) {//清除图层
        map.overlayers["themerange"].remove();
        map.overlayers["themerange"] = null;
        delete map.overlayers["themerange"];
      }
      let isCreated;
      if (isChange && map.overlayers[type]) {
        if (currentIden) {
          this.getNewFeatures(this.region_data, type);
          this.mapLayers.map(item => {
            if (item.type == "themerange") {
              item["ident"] = idenCode + "_" + currentIden;
            }
          });
        } else {
          this.getNewFeatures(this.region_data, type);
          this.mapLayers.map(item => {
            if (item.type == "themerange") {
              item["ident"] = idenCode;
            }
          });
        }
      } else {
        // 如果当前图层不为空
        if(Object.keys(map.overlayers).length > 0 ){
          //如果当前存在3d专题图，且当前3D专题图隐藏的时候，直接不去切换数据
          if(map.overlayers["themerange"] !== undefined && map.overlayers["themerange"] !== null && map.overlayers["themerange"].hidden == true){
            return;
          }else if(map.overlayers["themerange"] == undefined||map.overlayers["themerange"] == null){  //如果当前专题图不存在也不要去新建，因为有其他专题图存在
            return;
          }
        }

        if(map.overlayers["themerange"]){
          map.overlayers["themerange"].remove();
        }
        let layerData = {
            type: "themerangeLayer",
            name: "分段专题图3D",
            data: {
              id: "themerangeLayer",
              name: "分段专题图3D",
              datas: [
                {
                  segment_values: that.segment_values,
                  values: that.region_data,
                  all_segment_values:all_segment_values
                }
              ]
            }
          };

        if (layerData.data.datas[0].values.length) {
          this.$store.commit("addLayer", "themerange");
          let layerInfo = Layer.themerangeLayer.createLayer(
            map,
            layerData.data,
            () => {
              this.mapLayers.map(item => {
                if (item.type == "themerange") {
                  if (currentIden) {
                    item["ident"] = idenCode;
                    let currentLayerIden = {
                      type: "themerange",
                      iden: idenCode + "_" + currentIden
                    };
                    hiddenLayer.hideLayer(sgisMapBase.map);
                    this.$store.commit("getMapLayeriden", currentLayerIden);
                    EventBus.$emit("currentLayerHidden", "themerange");
                  } else {
                    item["ident"] = idenCode;
                    let currentLayerIden = {
                      type: "themerange",
                      iden: idenCode
                    };
                    hiddenLayer.hideLayer(sgisMapBase.map);
                    this.$store.commit("getMapLayeriden", currentLayerIden);
                    EventBus.$emit("currentLayerHidden", "themerange");
                  }
                }
                if (
                  this.mapLayers.length == 1 &&
                  this.mapLayers[0].type == "themerange"
                ) {
                  timeChange = true;
                  EventBus.$emit("timechange-awite", timeChange);
                }
              });
            }
          );
        } else {
          // this.$message({
          //   message: "当前时间段无数据",
          //   type: "warning"
          // });
        }
      }
    },
    unique(regioncode) {
      for (var i = 0; i < regioncode.length; i++) {
        for (var j = i + 1; j < regioncode.length; j++) {
          if (regioncode[i] == regioncode[j]) {
            //第一个等同于第二个，splice方法删除第二个
            regioncode.splice(j, 1);
            j--;
          }
        }
      }
      return regioncode;
    },
    getNewFeatures(values, type) {
      let valueTemp = {};
      let regioninfos = [];
      for (let i = 0; i < values.length; i++) {
        // 每一百个区划叠加一次，不一次性查询出来，村的边界数据太大
        let regioncode = values[i].regioncode;
        let value = values[i].value;
        let regiontype = values[i].regiontype;
        valueTemp[regioncode] = value;
        let regionInfo = {
          regioncode: regioncode,
          regiontype: regiontype
        };
        regioninfos.push(regionInfo);
        if (i > 0 && i % 100 === 0) {
          this.queryFeatures(valueTemp, regioninfos, values, type);
          valueTemp = {};
          regioninfos = [];
        }
      }
      if (valueTemp !== null && !$.isEmptyObject(valueTemp)) {
        this.queryFeatures(valueTemp, regioninfos, values, type);
      }
    },
    clearEnclave(coordinates){
      var maxIndex = 0;
      var maxLength = 0;
      for(var i = 0 ; i < coordinates.length ;i++){
        for(var j = 0 ; j < coordinates[i].length ; j ++){
          if(coordinates[i][j].length>maxLength){
            maxLength = coordinates[i][j].length;
            maxIndex = i;
          }
        }
      }
      return [coordinates[maxIndex]];
    },
    queryFeatures(data, regioninfos, timeData, type) {
      const map = sgisMapBase.getMap();
      let regiontype = regioninfos[0].regiontype;
      let _this = this;
      if(_.isEqual(this.preRegions,regioninfos)){
        let result = _this.preRegionFeatures;
        // 保存一下本次请求features结果
        if (result && result.features) {
          let features = result.features;
          // 重新构造一下features
          for (let i = 0; i < features.features.length; i++) {
            let code = features.features[i].properties.QH_CODE;
            features.features[i].properties["value"] = data[code];
            features.features[i].properties["idenName"] = "销售面积";
            timeData[i].timeData = features.features[i].properties;
            features.features[i].geometry.coordinates = this.clearEnclave(features.features[i].geometry.coordinates);
          }
          if (type == "themerange") {
            map.overlayers[type].setData(features.features);
            EventBus.$emit("timechange-awite", true);
          }
          if (type == "rangeThemeLayer") {
            map.overlayers[type].addFeatures(features.features);
            EventBus.$emit("timechange-awite", true);
          }
        }
      }else {
        this.preRegions = regioninfos;
        sgisSpatialQuery.spatialQueryUtil.getFeaturesByRegionCodes(
          regioninfos,
          regiontype,
          serviceResult => {
            let result = serviceResult.result;
            if(result === undefined) return;
            // 保存一下本次请求features结果
            _this.preRegionFeatures = result;
            if (result && result.features) {
              let features = result.features;
              // 重新构造一下features
              for (let i = 0; i < features.features.length; i++) {
                let code = features.features[i].properties.QH_CODE;
                features.features[i].properties["value"] = data[code];
                features.features[i].properties["idenName"] = "销售面积";
                timeData[i].timeData = features.features[i].properties;
                features.features[i].geometry.coordinates = this.clearEnclave(features.features[i].geometry.coordinates);
              }
              if (type == "themerange") {
                map.overlayers[type].setData(features.features);
                EventBus.$emit("timechange-awite", true);
              }
              if (type == "rangeThemeLayer") {
                map.overlayers[type].addFeatures(features.features);
                EventBus.$emit("timechange-awite", true);
              }
            }
          }
        );
      }
    },
    //获取区划
    updateRegions(data) {
      this.selectedRegionData = data;
      this.regionCodes = [];
      this.currentRegionXY = [];
      this.$store.commit("getReigonInfo", data);
      // this.$store.commit("changeCurrentRegionData", data);

      data.map(item => {
        this.regionCodes.push(item.code);
      });
      this.getCurrentRegionList(this.regionCodes, newArr => {
        this.$store.commit("getCurrentRegionXY", newArr);
        if (
          this.regionCheck &&
          this.regionCodes.length &&
          this.treeCheckIdenList.length
        ) {
          this.getIdenGRoupValueData();
        }
      });
    },
    getCurrentRegionList(arr, callback) {
      let req = {
        rcid: config.regions.rcid,
        regionCodes: arr
      };
      macroAPI
        .getRegionInfo(req)
        .then(res => {
          if (res.message == "success" && res.code == 0) {
            callback(res.data);
          } else {
            this.$message({
              message: res.message,
              type: "warning"
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    getReportType(callback) {
      axios({
        method: "get",
        url: macroAPI.getReportType().requestUrl,
        data: {}
      })
        .then(response => {
          if (response.status == 200) {
            callback(response.data.data);
          } else {
            this.$message({
              message: response.message,
              type: "warning"
            });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "../css/rule.scss";
.time-dimension {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  font-size: 1.4rem;
  .condition-content {
    background: #1c4060;
    line-height: 35px;
    .report-box {
      padding: 10px 0 0 0;
      p {
        float: left;
        line-height: 2;
        font-size: $fontSize;
        margin-right: 3px;
        margin-left: 10px;
      }
      .report_input {
        margin-left: 14px;
      }
      .el-tree {
        height: 200px;
        overflow: auto;
        width: 217px;
        z-index: 100;
        position: absolute;
        margin-left: 73px;
        border: 1px solid #ddd;
        margin-right: 3px;
      }
    }
    .macro-menu {
      margin-top: 10px;
      .el-tree {
        width: 100%;
        z-index: 99;
        position: absolute;
        margin-right: 3px;
        background: transparent;
        color: rgba(255, 255, 255, 0.8);
      }
    }
    .dimension {
      display: inline-block;
      margin: 10px;
      color: $normalFontColor;
    }
    .yeartime {
      width: 125px;
      color: #fff;
      // color: #fff;
    }
    .time {
      margin: 10px;
    }
  }
  .quickSearchContent{
     .searchlist-box {
      height: 55vh;
      ul {
        li {
          font-size: $fontSize;
          cursor: pointer;
          display: inline-block;
          width: 100%;
          p {
            float: left;
            cursor: pointer;
            line-height: 34px;
            i {
              float: left;
            }
          }
          i {
            float: right;
            margin-right: 10px;
            line-height: 2;
            font-size: 17px;
            color: $fontColorLimit;
          }
        }
      }
    }
  }
  .btnBox{
    width: 180px;
    height: 32px;
    border-radius: 4px;
    position: absolute;
    bottom: 30px;
    border: none;
    display: inline-block;
    margin-left: 50px;
    button:nth-child(1){
      float: left;
    }
    button:nth-child(2){
      float: right;
    }
  }
}
.idenVersionItem {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
.report-select {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.searchData {
  width: 74px;
  height: 32px;
  background: rgba(29, 156, 183, 1);
  border-radius: 4px;
  border: none;
}
.searchData.is-disabled{
  width: 74px;
  height: 32px;
  background: #1d9cb7;
  border-radius: 4px;
  right: 0;
  border: 1px solid #1d9cb7;
}
.showChartContain {
  width: 200px;
  box-sizing: border-box;
  padding: 10px;
  background: #ffffff;
  position: absolute;
  right: -204px;
  top: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .show_chart_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    .show_chart_img {
      width: 50px;
      height: 50px;
      border: 1px solid #eeeeee;
    }
    .show_check_item {
      border: 1px solid rgba(1, 123, 206, 1);
    }
    .show_check_font {
      color: rgba(1, 123, 206, 1);
    }
  }
}
.current-data {
  position: absolute;
  left: 0;
  top: 52px;
}
</style>
<style lang="scss">
@import "../css/rule.scss";
$themacolor: #1d9cb7;
$bordercolor: #d2d2d2;
.macro-menu
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: rgba(255, 138, 61, 0.7) !important;
}
.mapboxgl-popup-content {
  background: rgba(0, 0, 0, 0.5) !important;
  color: #fff;
}
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
  border-top-color: rgba(0, 0, 0, 0.5) !important;
}
.macro-menu .el-tree-node__content > .el-tree-node__expand-icon {
  visibility: hidden;
}
.tableObjPopper {
  display: none;
}
.macro-menu {
  .is-disabled {
    display: none;
  }
}
.idenGroupHead {
  padding: 4px;
}
.show-modle {
  width: 100px;
  position: absolute;
  transition: all 0.1s linear;
  right: 0px;
  opacity: 0;
  background: #fff;
  z-index: -1;
  border: 1px solid #eeeeee;
  border-radius: 10px;
  .showStyle {
    padding: 10px 0;
    text-align: center;
    cursor: pointer;
  }
}
.idenVersionContain {
  width: 100%;
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
  .versionName {
    padding: 0px 10px;
    text-align: left;
    width: 100%;
    background: rgba(255, 138, 61, 0.7);
  }
}
.versionItemContain {
  width: 100%;
}
.showIdenGroup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  width: 150px;
  background: rgba(23, 128, 154, 0.8);
  z-index: 1;
  border: 1px solid rgba(23, 128, 154, 0.8);
  border-radius: 10px;
  position: absolute;
  right: -190px;
  top: 0;
}
.iden-modle {
  right: -100px;
  opacity: 1;
}
.time-dimension {
  .el-input__inner {
    color: $normalFontColor;
    border: 1px solid $leftborderColor;
  }
}
.el-popper {
  border: 1px solid $leftborderColor;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover,
.el-cascader-menu__item:hover,
.el-cascader-menu__item:focus:not(:active) {
  /*background: #495b6e;*/
}
.el-select-dropdown__item,
.el-date-picker__header-label,
.el-picker-panel__icon-btn {
  color: #fff;
}
.el-year-table td .cell,
.el-month-table td .cell,
.el-cascader-menu__item span,
.el-cascader__label {
  color: rgba(255, 255, 255, 0.8);
}
.el-year-table td .cell:hover,
.el-year-table td.current:not(.disabled) .cell {
  color: #fff;
  background: rgba(255, 138, 61, 0.7);
}
.el-date-picker__header--bordered {
  border-bottom: rgba(255, 255, 255, 0.1) solid 1px;
}
.el-cascader-menu:nth-child(1) {
  border-right: rgba(255, 255, 255, 0.1) solid 1px;
  /*background: #35414f;*/
}
.groupItem {
  padding: 2px 0;
}
.closeGroup {
  position: absolute;
  right: 10px;
  top: 10px;
  color: #fff;
  cursor: pointer;
}
.time-dimension {
  .el-input--mini .el-input__inner {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  .el-input--small .el-input__inner {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  .el-icon-folder {
    color: #fff;
  }
  .el-icon-folder-opened {
    color: #fff;
  }
}
.el-picker-panel {
  background-color: rgba(23, 128, 154, 0.8);
  color: #fff;
}
.condition-bottom {
  flex: 1;
  background: rgba(18, 90, 120, 0.5);
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover {
  background: rgba(255, 138, 61, 0.7) !important;
  color: #fff;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
  background: rgba(255, 138, 61, 0.7) !important;
  color: #fff;
}
.el-tag.el-tag--info {
  background: rgba(255, 138, 61, 0.7) !important;
  color: #fff;
  border: 1px solid rgba(255, 138, 61, 0.7);
}
.el-popover {
  background: rgba(23, 128, 154, 0.8);
}
.el-popover__title {
  color: #fff;
}
.groupItem {
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: $themacolor !important;
    border-color: $themacolor;
  }
  .el-checkbox__inner {
    background: transparent;
  }
  .el-checkbox {
    color: rgba(255, 255, 255, 0.6);
  }
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #fff;
  }
  .el-checkbox__inner:hover {
    border-color: $themacolor;
  }
}
.el-scrollbar {
  background: rgba(23, 128, 154, 0.8);
  color: rgba(255, 255, 255, 0.6);
}
.el-cascader-node.in-active-path,
.el-cascader-node.is-active,
.el-cascader-node.is-selectable.in-checked-path {
  color: #fff;
  background: rgba(255, 138, 61, 0.7);
}
.el-cascader-node:not(.is-disabled):focus,
.el-cascader-node:not(.is-disabled):hover {
  background: rgba(255, 138, 61, 0.7);
}
.el-cascader__dropdown {
  background: transparent;
}
.time-dimension .el-tabs .el-tabs__header{
    border-bottom: 0 solid #e4e7ed;
    margin: 0;
    background: rgba(10,87,110,.5);
    padding: 10px 0 0 5px;
}
.time-dimension{
  .el-tabs__nav{
    border: none!important;
  }
  .el-tabs__item{
    color: #fff;
    border: none!important;
  }
  .el-tabs .el-tabs__item.is-active{
    color: #fff!important;
    background: rgb(28, 64, 96);
    border: none;
    border-radius: 4px 4px 0 0;
  }
  .dialogSaveTerm{
    background: $panelContentBg;
    .el-dialog__header{
      background: $panelTitleBg;
      padding: 0;
    }
    .el-dialog__title{
      color: $fontColorW;
      line-height: 2;
    }
    .el-dialog__headerbtn{
      width: auto;
      height: auto;
      top: 0;
    }
    .el-dialog__body{
      padding-bottom: 0;
      form{
        width: 100%;
        input{
          margin: 0;
          background: none;
          border: 1px solid $borderColorW;
          color: $fontColorLimit;
        }
        .el-form-item__label{
          color: $fontColorW;
        }
      }
    }
    .el-dialog__close{
      margin-top:8px;
      color: $fontColorLimit;
    }
    .el-dialog__close:hover{
      color: $fontColorLimit;
    }
    .el-dialog__footer{
      display: inline-block;
      button{
        width: auto;
        height: auto;
      }
      .cancel {
        color: $fontColorW;
        background: none;
        border: 1px solid rgba(238,238,238,0.2);
        box-sizing: border-box;
      }
      .submit {
        border: none;
        background: #1d9cb7;
        border: 1px solid #1d9cb7;
        box-sizing: border-box;
      }
      button{
      width: auto;
      height: auto;
      color:#fff;
    }
    .el-button--default{
      background: none;
      border:1px solid rgba(238, 238, 238, 0.2);
    }
    .el-button--primary{
      background: #1d9cb7;
      border: 1px solid #1d9cb7;
    }
    }
  }
}
.searchData.is-disabled {
  .el-loading-mask{
    background-color: rgba(255, 255, 255, 0.29);
  }
}
</style>

